<template>
	<view>
		<Navbar title="我要吐槽" />

		<view style="padding: 0 30rpx;">
			<u--form :model="form" ref="uForm" labelWidth="200rpx" labelAlign="left">
				<u-form-item label="反馈类型" borderBottom required>
					<view class="item-panel">
						<u-radio-group v-model="form.type" placement="row" :activeColor="mainColor">
							<u-radio :customStyle="{marginRight: '40rpx'}" v-for="(item, index) in cooperaTypeColumns"
								:key="index" :label="item.name" :name="item.key" @change="cooperaTypeChange">
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item label="反馈内容" required>
					<view class="item-panel">
						<u--textarea v-model="form.content" maxlength="200" placeholder="请填写合作意向描述"></u--textarea>
					</view>
				</u-form-item>
				<u-form-item label="反馈截图" required>
					<view class="item-panel">
						<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
							:maxCount="1"></u-upload>
					</view>
				</u-form-item>
			</u--form>
		</view>
		
		<template v-if="userInfo.nick_name == '好上头'">
			<text class="pl-24 pr-24 font-24" style="word-break:break-all;" @click="copyText()">{{ launchOptions }}</text>
		</template>

		<view class="btn-panel">
			<u-button text="确定" type="primary" :color="mainColor" @click="handleSubmit()"></u-button>
		</view>

	</view>
</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import { uploadOssMixins } from '@/mixins/uploadOssMixins.js'
import Navbar from '@/components/navbar/navbar.vue'
import { addUserFeedback } from '@/api/index.js'

export default {
  components: { Navbar, },
  mixins: [colorMixins, uploadOssMixins],
  data() {
    return {
      cooperaTypeColumns: [{
        name: '充值未到账',
        key: 1,
      },
      {
        name: '其它',
        key: 2,
      }
      ],
      form: {
        type: 1,
        content: '',
        image: '',
      },
      fileList: [],
      userInfo: {},
			
      launchOptions: undefined,
    }
  },
  created() {
		
    // 获取启动时的参数
    const launchOptions = uni.getLaunchOptionsSync()
    this.launchOptions = JSON.stringify(launchOptions)
		
		
    this.queryUserInfoFn()
  },
  methods: {
    copyText(){
      uni.setClipboardData({
        data: this.launchOptions,
        success: function () {
          console.log('复制成功')
        }
      })
    },
    // 查用户信息
    async queryUserInfoFn() {
      const data = await this.$store.dispatch('UserInfo')
      this.userInfo = data
    },

    cooperaTypeChange(n) {
      console.log('radioChange', n)
    },

    afterRead(event) {
      const { thumb } = event.file

      const { user_id } = this.userInfo
      this.getFormDataParams().then(() => {
        this.uploadFile(thumb, res => {
          this.form.image = res.data.id

          this.fileList = [{ url: res.data.url }]
        })
      })
    },

    deletePic(event) {
      const index = event.index
      this.form.image = ''
      this.fileList.splice(index, 1)
    },

    async handleSubmit() {
      if (!this.form.content) return uni.$u.toast('请填写合作意向描述')
      else if (!this.form.image) return uni.$u.toast('请上传反馈截图')

      await addUserFeedback(this.form)
      uni.$u.toast('提交成功')
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    },

  }
}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item__body {
		padding: 30rpx 0;
		flex-direction: column !important;
	}

	/deep/ .u-form-item {
		margin-bottom: 30rpx;
	}

	/deep/ .u-form-item__body__right__content__slot {
		align-items: flex-end;
		flex-direction: column;
	}

	/deep/ .u-textarea {
		background-color: #f4f5f7 !important;
	}


	.item-panel {
		display: flex;
		position: relative;
		width: 100%;
		margin-top: 20rpx;
	}

	.btn-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 40rpx;
		width: 90%;
		margin: 0 auto;

		/deep/ .u-button {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>
